<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
</head>
<body>
<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>翻转字符串: {{ reversedMessage }}</p>
    <p>首/尾字母大写: {{ message | capitalizeFirstLetter | capitalizeLastLetter }}</p>
    <button v-on:click="changeMessage">change</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'this is a old test',
        },
        filters: {
            capitalizeFirstLetter(value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            },
            capitalizeLastLetter(value) {
                if (!value) return ''
                value = value.toString()
                return value.slice(0, value.length - 1) + value.charAt(value.length - 1).toUpperCase()
            },
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            changeMessage: function () {
                if (this.message === 'this is a old test') {
                    this.message = 'message change'
                } else {
                    this.message = 'this is a old test'
                }
            },
        },
    });
</script>
</body>
</html>